<template>
    <view :class="theme_view">
        <view v-if="(config || null) != null">
            <form @submit="form_submit" class="form-container">
                <view class="page-bottom-fixed padding-main">
					<view class="bg-white border-radius-main pr oh spacing-mb padding-main">
						<view class="plugins-yxformplus">
							<view v-if="(report_type_list || null) != null" class="item flex-row">
								<view class="title"><text class="cr-red text-size-xs margin-right-sm"></text>举报类型</view>
								<view class="spec flex-1 spec2">
									<view class="uni-list">
										<radio-group @change="yxonclick">
											<label class="yxradio" v-for="(items, indexs) in report_type_list" :key="indexs">
												<radio :value="items.id" :checked="((items.checked || null) != null && items.checked == true) || ((data || null) != null && data.report_type == items.id)" :color="theme_color" name="report_type" style="transform:scale(0.7);" />{{items.name}}
											</label>
										</radio-group>
									</view>
								</view>
							</view>
							<view class="item flex-row" v-if="(config.report_box_arr || null) != null && info_id > 0">
								<view class="title"><text class="cr-white text-size-xs margin-right-sm"></text>举报原因</view>
								<view class="spec flex-1">
									<view class="label_box">
										<view class="label_box_cc">
											<block v-for="(item, index) in config.report_box_arr" :key="index">
												<view :data-index="index" :data-value="item" class="fl text-size-xs br-main" :class="(label_arr_chose[index] ? 'bg-main cr-white' : '')" @tap="label_event">{{item}}</view>
											</block>
										</view>
										<view class="c_b"></view>
									</view>
								</view>
							</view>
							<view class="item flex-row">
								<view class="title"><text class="cr-red text-size-xs margin-right-sm"></text>备注说明</view>
								<view class="spec spec2 flex-1">
									<textarea placeholder="长度不超过100" name="content" placeholder-class="cr-grey-9" class="form-item wh-auto yxformplus-item" maxlength="100" :value="(data || null) != null ? data.content : ''"></textarea>
								</view>
							</view>
							<view class="item flex-row">
								<view class="title"><text class="cr-red text-size-xs margin-right-sm"></text>联系人姓名</view>
								<view class="spec flex-1">
									<input type="text" placeholder-class="cr-grey-9" placeholder="请输入联系人姓名" name="contact_name" class="form-item wh-auto yxformplus-item" :value="(data || null) != null ? data.contact_name : ''" maxlength="50" />
								</view>
							</view>
							<view class="item flex-row">
								<view class="title"><text class="cr-red text-size-xs margin-right-sm"></text>联系人电话</view>
								<view class="spec flex-1">
									<input type="text" placeholder-class="cr-grey-9" placeholder="请输入联系人电话" name="contact_tel" class="form-item wh-auto yxformplus-item" :value="(data || null) != null ? data.contact_tel : ''" maxlength="30" />
								</view>
							</view>
						</view>
                    </view>
                </view>
                <!-- 底部操作 -->
                <view class="bottom-fixed btn-bottom bg-white">
                    <view class="oh bottom-line-exclude">
                        <button class="cr-white bg-main round text-size wh-auto" type="default" form-type="submit" hover-class="none" :loading="form_submit_loading" :disabled="form_submit_loading">{{$t('common.submit')}}</button>
                    </view>
                </view>
            </form>
        </view>
        <view v-else>
            <!-- 提示信息 -->
            <component-no-data :propStatus="data_list_loding_status" :propMsg="data_list_loding_msg"></component-no-data>
        </view>
    </view>
</template>
<script>
    const app = getApp();
    import componentNoData from '@/components/no-data/no-data';
	import componentMofang from "@/components/mofang/mofang";
    export default {
        data() {
            return {
                theme_view: app.globalData.get_theme_value_view(),
                theme_color: app.globalData.get_theme_color(),
                data_list_loding_status: 1,
				data_list_loding_msg: '',
                data: {},
				params:null,
				label_arr_chose:[],
				report_type_list: null,
				config: null,
				info_id: 0,
				user: null,
				report_type: 0,
				label_str_chose: '',

                // 分类选择弹窗
                popup_status: false,

                // 路径类型
                editor_path_type: 'common',

                // 提交按钮
                form_submit_loading: false,
				
				diytheme: app.globalData.get_fcc_theme_color(),
				plugins_fccprouniapp_mofang: null,
            };
        },
        components: {
            componentNoData,
			componentMofang
        },

        onLoad(params) {
            //params['info_id'] = 52;
            this.setData({
                params: params,
				info_id: params.info_id || 0
            });

            // 数据加载
            this.init();
        },

        onShow() {
			app.globalData.page_event_onshow_handle();
		},

        methods: {
			label_event(e){
				var index = e.currentTarget.dataset.index;
				var value = e.currentTarget.dataset.value;
				/*var temp_label_arr_chose = this.label_arr_chose;
				temp_label_arr_chose[index] = !temp_label_arr_chose[index];
				this.setData({
				    label_arr_chose: temp_label_arr_chose
				});*/
				// 改为选择了哪个就是哪个，其他取消的模式
				var temp_label_arr_chose = [];
				temp_label_arr_chose[index] = true;
				this.setData({
				    label_arr_chose: temp_label_arr_chose,
					label_str_chose: value
				});
				// 存到缓存
				var temp = this.data;
				temp['label_arr_chose'] = this.label_arr_chose;
				uni.setStorageSync('plugins_classinfo_report_form_temp', temp);
			},
            init() {
                var user = app.globalData.get_user_info(this, 'init');
                if (user != false) {
					console.log(user);
					this.setData({
					    user: user
					});
                    this.get_data_list_before();
                } else {
                    // 提示错误
                    this.setData({
                        data_list_loding_status: 2,
                        data_list_loding_msg: this.$t('form.form.8l3ul5'),
                    });
                }
            },
			get_data_list_before(){
				var self = this;
				// 赋值已有数据
				uni.getStorage({
					key: 'plugins_classinfo_report_form_temp',
					success: function (res) {
						self.setData({
						    data: res.data,
						});
					},
					complete: function (res) {
						self.get_data_list();
					}
				});
			},
            get_data_list() {
				var id = this.params.id || 0;

                // 加载loding
                uni.showLoading({
                    title: this.$t('common.loading_in_text'),
                });
				
				this.setData({
				    data_list_loding_status: 1,
				});
				
                uni.request({
                    url: app.globalData.get_request_url('fabuinit', 'report', 'classinfo'),
                    method: 'POST',
                    data: { id: id },
                    success: (res) => {console.log('-------->fabuint');console.log(res);
                        uni.hideLoading();
                        if (res.data.code == 0) {
							var info = res.data.data;
							var config = info.config || null;
							var data = info.data || null;
							var temp_label_arr_chose = [];
							if((config != null) && (config.report_box_arr || null) != null)
							{
								let array_str = (data || null) != null ? ((data.describe || null) != null ? data.describe : null) : null;
								for(var i in config.report_box_arr)
								{
									if((array_str || null) != null && array_str == config.report_box_arr[i])
									{
										temp_label_arr_chose[i] = true;
									}
									else{
										temp_label_arr_chose[i] = false;
									}
								}
							}console.log(temp_label_arr_chose); 
							
							var upd_data = {
								data: data || null,
								config: info.config || null,
								report_type_list: info.report_type_list || null,
								label_arr_chose: temp_label_arr_chose,
								data_list_loding_status: 3,
								plugins_fccprouniapp_mofang: info.mofang || null,
							};
							this.setData(upd_data);

							// 存到缓存
							if((data || null) != null)
							{
								var temp = data;
								temp['label_arr_chose'] = this.label_arr_chose;
								uni.setStorageSync('plugins_classinfo_report_form_temp', temp);
							}
                        } else {
                            this.setData({
                                data_list_loding_status: 0,
								data_list_loding_msg: res.data.msg,
                            });
                            if (app.globalData.is_login_check(res.data, this, 'get_data_list')) {
                                app.globalData.showToast(res.data.msg);
                            }
                        }
                    },
                    fail: () => {
                        uni.hideLoading();
                        this.setData({
                            data_list_loding_status: 2,
							data_list_loding_msg: this.$t('common.internet_error_tips')
                        });
                        app.globalData.showToast(this.$t('common.internet_error_tips'));
                    },
                });
            },
			
			yxonclick(e)
			{
				var value = e.detail.value;
				let temp_data = this.data;
				temp_data['report_type'] = value;
				this.setData({
				    report_type: value,
				});
				uni.setStorageSync('plugins_classinfo_report_form_temp', temp_data);
			},

            // 表单提交
            form_submit(e) {
				this.real_go_submit(e);
			},
			real_go_submit(e){
				// 表单数据
				var form_data = e.detail.value;

				var validation = [];
				
				// 举报非信息类型时
				if(this.info_id == 0)
				{
					if(this.report_type == 0)
					{
						app.globalData.showToast('请先选择举报类型');
						return false;
					}
					// 非信息举报的时候，内容要写
					validation.push({fields: 'content', msg: '备注说明不能为空'});
					
					form_data['report_type'] = this.report_type;
				}
				
                if (app.globalData.fields_check(form_data, validation)) {
                    uni.showLoading({
                        title: this.$t('buy.buy.r79t77'),
                    });
                    this.setData({
                        form_submit_loading: true,
                    });
					
                    var new_data = {
						'about_id': this.info_id,
						'describe': this.label_str_chose,
						'id': this.params.id || 0,
                        ...form_data,
                    };
					console.log(new_data);
					//return;
                    // 网络请求
                    uni.request({
                        url: app.globalData.get_request_url('save', 'report', 'classinfo'),
                        method: 'POST',
                        data: new_data,
                        dataType: 'json',
                        success: (res) => {console.log(res.data);
                            uni.hideLoading();
                            if (res.data.code == 0) {
								// 清理当前页面临时数据
								uni.removeStorageSync('plugins_classinfo_report_form_temp');
								
								app.globalData.showToast(res.data.msg, 'success');
								setTimeout(function () {
									// 回到我的信息页面
									app.globalData.url_open('/pages/fcc/classinfo/report-list/report-list');
								}, 2000);
                            } else {
                                this.setData({
                                    form_submit_loading: false,
                                });
                                if (app.globalData.is_login_check(res.data)) {
                                    app.globalData.showToast(res.data.msg);
                                } else {
                                    app.globalData.showToast(this.$t('common.sub_error_retry_tips'));
                                }
                            }
                        },
                        fail: () => {
                            uni.hideLoading();
                            this.setData({
                                form_submit_loading: false,
                            });
                            app.globalData.showToast(this.$t('common.internet_error_tips'));
                        },
                    });
                }
            }
        },
    };
</script>
<style>
    @import './report.css';
</style>
